<script setup lang="ts">
import { ref } from "vue";

import { useRouter } from "vue-router";

import { NFlex } from "naive-ui";
import { NForm } from "naive-ui";
import { NFormItem } from "naive-ui";
import { NInput } from "naive-ui";
import { NButton } from "naive-ui";

import type { FormItemRule, FormRules } from "naive-ui";

const router = useRouter();

const cancel = () => {
  router.push("/login");
};

const info = ref({
  name: "",
  email: "",
  password: "",
  confirmPassword: "",
});

const rules: FormRules = {
  name: {
    required: true,
    message: "请输入用户名",
    trigger: "blur",
  },
  email: {
    required: true,
    message: "请输入邮箱",
    trigger: "blur",
  },
  password: {
    required: true,
    message: "请输入新密码",
    trigger: "blur",
  },
  confirmPassword: [
    {
      required: true,
      message: "请再次输入新密码",
      trigger: ["blur"],
    },
    {
      validator: (rule: FormItemRule, value: string): boolean => {
        if (value.length != info.value.password.length) return false;
        return value === info.value.password;
      },
      message: "两次输入密码不一致",
      trigger: ["blur", "input"],
    },
  ],
};
</script>

<template>
  <n-flex justify="center" class="w-full h-full">
    <n-flex justify="center" class="w-1/2">
      <n-form :model="info" :rules="rules" class="w-full pt-5">
        <n-form-item label="用户名" path="name">
          <n-input
            v-model:value="info.name"
            placeholder="请输入用户名"
          ></n-input>
        </n-form-item>
        <n-form-item label="邮箱" path="email">
          <n-input
            v-model:value="info.email"
            placeholder="请输入邮箱"
          ></n-input>
        </n-form-item>
        <n-form-item label="新密码" path="password">
          <n-input
            v-model:value="info.password"
            placeholder="请输入新密码"
            show-password-on="click"
            type="password"
            clearable
          ></n-input>
        </n-form-item>
        <n-form-item label="确认密码" path="confirmPassword">
          <n-input
            v-model:value="info.confirmPassword"
            :disabled="!info.password"
            placeholder="请再次输入新密码"
            show-password-on="click"
            type="password"
            clearable
          ></n-input>
        </n-form-item>
        <n-flex justify="space-around">
          <n-button type="success">确认</n-button>
          <n-button type="warning" @click="cancel">取消</n-button>
        </n-flex>
      </n-form>
    </n-flex>
  </n-flex>
</template>

<style scoped></style>
